<template>
    <div class="result-board">

        <div class="result-board-text" v-if="$store.state.pk.loser === 'playerA' && $store.state.pk.opponent_kind === 'playerB'">
            Lose<!--因为全局变量里面存的user.id是字符串形式，pk.a_id是整数形式-->
        </div>
        <div class="result-board-text" v-else-if="$store.state.pk.loser === 'playerB' && $store.state.pk.opponent_kind === 'playerA'">
            Lose<!--因为全局变量里面存的user.id是字符串形式，pk.a_id是整数形式-->
        </div>
        <div class="result-board-text" v-else>
            Win
        </div>
        <div class="result-board-btn">
            <button @click="restart" type="button" class="btn btn-warning btn-lg">
                再来!
            </button>
        </div>
    </div>    
</template>

<script>
import { useStore } from 'vuex';
import {ref} from 'vue'

export default {
    setup() {
        const store = useStore();
        let isloser = ref(0);

        const restart = () => {//点击事件，重新玩
            store.commit("updateStatus", "matching");//会匹配页面
            store.commit("updateLoser", "none");//清空输的人
            store.commit("updateOpponent", {//重置对手
                username: "我的对手",
                photo: "https://cdn.acwing.com/media/article/image/2022/08/09/1_1db2488f17-anonymous.png",
            })
        }

        const update_rating = () =>{//胜负出来了，就去后端更新天梯分数
            if(store.state.pk.loser === 'playerA' && store.state.pk.opponent_kind === 'playerB'
                || store.state.pk.loser === 'playerB' && store.state.pk.opponent_kind === 'playerA'
                )isloser=1;
            else isloser = 0;

             store.state.pk.socket.send(JSON.stringify({//向链接发送json转字符串的信息
                        event: "updateRating",//确定事件类型
                        isloser: isloser,
                    }));
        }

        update_rating();//自动调用

        return {
            restart
        };
    }
}
</script>

<style scoped>
div.result-board {
    height: 30vh;
    width: 30vw;
    background-color: rgba(50, 50, 50, 0.5);
    position: absolute;/*位置*/
    top: 30vh;
    left: 35vw;
}
div.result-board-text {
    text-align: center;/*居中*/
    color: white;/*文字白色*/
    font-size: 50px;
    font-weight: 600;/*加粗*/
    font-style: italic;/*斜体*/
    padding-top: 5vh;
}

div.result-board-btn {
    padding-top: 7vh;
    text-align: center;
}
</style>
